<template>
  <div>
    <a-textarea
      v-model:value="src"
      :auto-size="false"
      allow-clear
      placeholder="Image Src"
      class="w-full"
      @keydown.enter="setSrc"
    ></a-textarea>
    <div class="justify-between flex">
      <div class="text-12">抖动</div>
      <a-radio-group v-model:value="isDithered" @change="setImageisDithered">
        <a-radio :value="false">
          <span>原图</span>
        </a-radio>
        <a-radio :value="true">
          <span>抖动</span>
        </a-radio>
      </a-radio-group>
    </div>
    <div class="justify-between flex items-center">
      <div class="text-12">删除图片</div>
      <a-button @click="deleteImage">
        <DeleteOutlined />
      </a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { dithered } from '@/api/modules/utils/utils';
import { currentShape } from '../../../data/shapes';
import { stageConfig } from '../../../data/stage';
import { DeleteOutlined } from '@ant-design/icons-vue';

const isDithered = ref(false);
const src = ref();
/**
 * 注释: 确定
 *
 * */
const setSrc = () => {
  currentShape.value.src = src.value;
  currentShape.value.cacheSrc = src.value;
};
/**
 * 注释: 设置黑白抖动
 *
 * */
const setImageisDithered = async () => {
  if (isDithered.value) {
    const image = await dithered({
      color: stageConfig.value.deviceColor,
      height: currentShape.value.h,
      width: currentShape.value.w,
      str: currentShape.value.src,
    });
    currentShape.value.cacheSrc = image.data;
  } else {
    currentShape.value.cacheSrc = currentShape.value.src;
  }
  currentShape.value.keep = isDithered.value;
};

const deleteImage = () => {
  currentShape.value.cacheSrc = '';
  currentShape.value.rotate = 0;
};
watch(
  currentShape,
  () => {
    isDithered.value = currentShape.value.keep;
  },
  {
    deep: true,
    immediate: true,
  },
);
</script>

<style lang="scss" scoped>
textarea {
  width: 100%;
  resize: none;
  height: 100px;
  border: 1px solid #eee;
  border-radius: var(--border-radius);
}
</style>
